<template>
    <div>
        <Card>
            <span slot="title">修改密码</span>
            <div slot="content">
                <el-form
                    ref="changgeForm"
                    :rules="rules"
                    :model="changgeForm"
                    label-width="80px"
                    status-icon
                >
                    <el-form-item label="原密码" prop="oldPwd">
                        <el-input v-model="changgeForm.oldPwd"></el-input>
                    </el-form-item>
                    <el-form-item label="新密码" prop="newPwd">
                        <el-input v-model="changgeForm.newPwd"></el-input>
                    </el-form-item>
                    <el-form-item label="确认密码" prop="okpwd">
                        <el-input v-model="changgeForm.okpwd"></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" @click="onSubmit"
                            >确定</el-button
                        >
                        <el-button @click="resetForm(changgeForm)"
                            >重置</el-button
                        >
                    </el-form-item>
                </el-form>
            </div>
        </Card>
    </div>
</template>

<script>
import Card from "@/components/Card.vue";
import { PWD_REG } from "@/utilis/reg.js";
import { oldPwd, changgePwd } from "@/apis/acc.js";
import local from "@/utilis/local.js"
export default {
    components: {
        Card,
    },
    data() {
        const regnewPwd = (rule, value, callback) => {
            if (!value) {
                callback(new Error("输入不能为空"));
            } else if (!PWD_REG.test(value)) {
                callback(new Error("请输入3-15位的密码"));
            } else {
                callback();
            }
        };
        // 确认密码验证
        const regOkPwd = (rule, value, callback) => {
            if (!value) {
                callback(new Error("输入不能为空"));
            } else if (value !== this.changgeForm.newPwd) {
                callback(new Error("两次密码不一致"));
            } else {
                callback();
            }
        };
        // 旧密码验证
        const oldPwdFn = async (rule, value, callback) => {
            if (!value) {
                callback(new Error("输入不能为空"));
            } else {
                let { code } = await oldPwd({
                    oldPwd: value,
                });
                if (code == "00") {
                    return;
                }
            }
        };
        return {
            changgeForm: {
                oldPwd: "",
                newPwd: "",
                okpwd: "",
            },
            rules: {
                oldPwd: { validator: oldPwdFn, trigger: "blur" },
                newPwd: { validator: regnewPwd, trigger: "blur" },
                okpwd: { validator: regOkPwd, trigger: "blur" },
            },
        };
    },
    methods: {
        onSubmit() {
            this.$refs.changgeForm.validate(async (valid) => {
                if (valid) {
                    let { code } = await changgePwd({
                        newPwd: this.changgeForm.newPwd,
                    });
                    if (code == 0) {
                        local.remove("tk")
                        this.$router.push("/login");
                    }
                } else {
                    this.$message.error("修改失败，请按要求填写");
                }
            });
        },
        resetForm() {
            this.$refs.changgeForm.resetFields();
        },
    },
};
</script>

<style lang="less" scoped>
.el-form {
    /deep/.el-input {
        width: 280px;
    }
}
</style>